<template>
  <h1>{{ arr }}</h1>
  <button @click="setObj(100)">点击触发事件</button>
  <button @click="arr.push(222)">点击触发事件</button>
  <hr>
  <h1>{{ num }}</h1>
  <button @click="setNum">点击</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { reactive } from 'vue';
// -------------------------------
// reactive 只能 创建 引用类型的响应式数据 不能创建 基本类型的响应式数据
// ref 既可以创建 基本类型 也可以创建 引用类型
// ref是 通过 reactive 封装的;
let arr = reactive([1, 2, 3, 4])
const setObj = (msg) => {
  arr.push(msg)
  console.log(arr);
}
// ----------------------
let num = reactive(0)
const setNum = () => {
  console.log(num);
  // 注意：可以更改数据的值  但是 这个数据 并不是响应的;
  num = 1333
}

</script>
